<script setup lang="ts">
import { getUserInfoById } from '@/api/user';
import { User } from '@/api/user/type';
import Boy from '@/components/icons/Boy.vue';
import Girl from '@/components/icons/Girl.vue';
import YHeader from '@/components/YHeader.vue';
import { router } from '@/router';
import { onMounted, ref } from 'vue';
import Avatar from './components/Avatar.vue';
import { useRoute } from 'vue-router';

const userInfo = ref({} as User);

onMounted(() => {
    const route = useRoute();
    const id = route.query.id;
    if (id != undefined && !Array.isArray(id)) {
        getUserInfoById(id).then((res) => {
            userInfo.value = res.data as User;
        });
    }
})

const toEditNickname = () => {
    router.push({
        name: "Nickname",
        query: {
            'userId': userInfo.value.id
        }
    });
}

</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <div class="content">
            <Avatar v-model="userInfo.avatar"></Avatar>
            <div class="info">
                <div class="row" @click="toEditNickname">
                    <p class="left">昵称</p>
                    <p class="center">{{ userInfo.nickname }}</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
                <div class="row">
                    <p class="left">签名</p>
                    <p class="center">{{ userInfo.nickname }}</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
                <div class="row">
                    <p class="left">性别</p>
                    <div class="center">
                        <div class="icon">
                            <Boy :size="18" v-if="userInfo.sex === '男'"></Boy>
                            <Girl :size="18" v-else-if="userInfo.sex === '女'"></Girl>
                        </div>
                        <p class="center">{{ userInfo.sex }}</p>
                    </div>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
                <div class="row">
                    <p class="left">生日</p>
                    <p class="center">{{ userInfo.nickname }}</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
            </div>
            <div class="info">
                <div class="row">
                    <p class="left">学校</p>
                    <p class="center">{{ userInfo.nickname }}</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
                <div class="row">
                    <p class="left">地区</p>
                    <p class="center">{{ userInfo.nickname }}</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    .content {
        height: 93%;
        display: flex;
        flex-direction: column;
        .info {
            display: flex;
            flex-direction: column;
            margin-top: 3%;
            display: flex;
            background-color: white;
            .row {
                display: flex;
                .left {
                    width: 30%;
                    text-align: center;
                    color: #A6A5AC;
                }
                .center {
                    .icon {
                        padding-right: 5%;
                    }
                    display: flex;
                    width: 50%;
                    text-align: left;
                }
                .right {
                    display: flex;
                    width: 20%;
                    text-align: center;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}
</style>